<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>File Upload Test</title>

<link rel="stylesheet" href="./js/jquery-ui-1.8.24/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="./js/jquery-ui-1.8.24/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="./js/jquery-ui-1.8.24/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.24/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.24/ui/jquery.ui.progressbar.js"></script>

<!--
<style>
	.ui-progressbar{
		background : green;
		padding:1px;
	}
	.ui-progressbar-value{
		background : LightBlue;
	}
</style>
-->

<script type="text/javascript">
<!--
/*     jQuery(function () {
        jQuery('#progressbar').progressbar({
            value: 40
        });
    }); */
	
    var timer;

    function callback() {
    	$.ajax({
			type:"get",
			url:"lxFileUploadStatus",
			success:function(msg) {
				document.getElementById("span").innerHTML = "完成：" + msg + "%";
				$("#progressbar").progressbar("option", "value", parseInt(msg));
				if (msg >= 100) {
					clearInterval(timer);
					document.getElementById("mybutton").disabled = false;
				}
			}
		});
    }
    
    function formSubmit() {
		$.ajaxSetup({ cache: false });
		document.getElementById("mybutton").disabled = true;
		$("#progressbar").progressbar();
		timer = window.setInterval("callback()", 100);
		document.myform.submit();
    }
// -->
</script>

</head>
<body>
<iframe id='target_upload' name='target_upload' src='' style='display: none'></iframe>
File Upload Test
<br>
<form name="myform" action="lxFileUploadServlet" method="post" enctype="multipart/form-data" target="target_upload">
File:
<input type="file" name="myfile"><br>
<br>
<input id="mybutton" type="button" onclick="formSubmit()" value="Commit">
</form>
<br>
<div id="progressbar" style='padding:2px;'></div>
<br>
<span id="span"></span>
<br>
</body>
</html>